<link href="/public/js/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<?php
$allProvinces = $this->allProvinces;
?>

<div class="ad_title_ctn">
    <h2>Thêm nhà hàng</h2>
</div>

<div class="ad_content_ctn">
    <div id="pills">
        <ul>
            <li><a href="#pills-tab1" data-toggle="tab">Bước 1.Khai báo cơ bản</a></li>
            <li><a href="#pills-tab2" data-toggle="tab">Bước 2.Chọn mẫu</a></li>
            <li><a href="#pills-tab3" data-toggle="tab">Bước 3.Kết thúc</a></li>

        </ul>
        <div class="progress progress-danger progress-striped active">
            <div class="bar"></div>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="pills-tab1">
                <fieldset>
                    <legend>Thông tin nhà hàng</legend>
                    <table class="tblAddDistribution">

                        <tr>
                            <td class="required">Tên (*)</td>
                            <td><input id="txtName" style="width:200px;" name="txtName"
                                       class="k-textbox" required  validationMessage="Vui lòng nhập tên">
                        <span id="spnCheckDistributionNameStatus">

                        </span>
                        <span class="k-invalid-msg" data-for="txtName">
                            </td>
                        </tr>
                        <tr>
                            <td>Tỉnh Thành</td>
                            <td><?php echo $this->partial("select_tag.php"
                                    , array("data"=>$allProvinces, "id"=>"cboProvince","class"=>"k-textbox",
                                        "valCol"=>"id", "displayCol"=>"name" )) ?></td>

                        </tr>
                        <tr>
                            <td>Quận Huyện</td>
                            <td>
                                <select id="cboDistrict" class="k-textbox">


                                </select>
                            </td>

                        </tr>
                        <tr>
                            <td class="required">Địa chỉ(*)</td>
                            <td><input style="width:400px;" id="txtAddress" name="txtAddress"
                                       class="k-textbox" required  validationMessage="Vui lòng nhập địa chỉ">
                        <span class="k-invalid-msg" data-for="txtAddress">
                            </td>
                        </tr>
                        <tr>
                            <td class="required">Kinh độ</td>
                            <td><input style="width:400px;" id="txtLong" name="txtLong"
                                       class="k-textbox" >
                            </td>
                        </tr>
                        <tr>
                            <td class="required">Vĩ độ</td>
                            <td><input style="width:400px;" id="txtLat" name="txtLat"
                                       class="k-textbox" >
                            </td>
                        </tr>

                        <tr>
                            <td class="required">Số điện thoại(*)</td>
                            <td><input style="width:200px;" id="txtDomainPhone" name="txtDomainPhone"
                                       class="k-textbox" required
                                       validationMessage="Vui lòng nhập số điện thoại"
                                    > <span class="k-invalid-msg" data-for="txtDomainPhone"></td>
                        </tr>
                        <tr>
                            <td >Email</td>
                            <td><input id="txtEmail" style="width:200px;"
                                       type="email" name="Email" class="k-textbox" placeholder="myname@example.net"
                                       data-email-msg="Định dạng email chưa đúng." ></td>
                        </tr>
                        <tr>
                            <td >Website</td>
                            <td><input id="txtWebsite"  class="k-textbox"  style="width:200px;"></td>
                        </tr>


                    </table>
                </fieldset>

                <fieldset>
                    <legend>Thông tin chủ nhà cung cấp</legend>
                    <table  class="tblAddDistribution">

                        <tr>
                            <td class="required">Họ tên(*)</td>
                            <td><input style="width:200px;" id="txtBossName" name="txtBossName" class="k-textbox" required  validationMessage="Vui lòng nhập tên">
                    <span class="k-invalid-msg" data-for="txtBossName">
                            </td>
                        </tr>
                        <tr>
                            <td class="required">Số điện thoại(*)</td>
                            <td><input style="width:200px;" id="txtBossPhone" name="txtBossPhone" class="k-textbox" required  validationMessage="Vui lòng nhập số điện thoại">
                                <span id="spnCheckUserPhoneStatus"></span>
                                <span class="k-invalid-msg" data-for="txtBossPhone"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="required">Email(*)</td>
                            <td><input style="width:200px;" id="txtBossEmail" name="txtBossEmail" type="email" class="k-textbox" required
                                       validationMessage="Vui lòng nhập email"   data-email-msg="Định dạng email chưa đúng.">
                       <span class="k-invalid-msg" data-for="txtBossEmail">
                            </td>
                        </tr>

                        <tr>
                            <td class="required">Password(*)</td>
                            <td><input type="password" name="txtBossPassword" style="width:200px;" id="txtBossPassword" class="k-textbox" required  validationMessage="Vui lòng nhập mật khẩu">
                    <span class="k-invalid-msg" data-for="txtBossPassword">
                            </td>
                        </tr>
                        <tr>
                            <td class="required">Nhập lại password(*)</td>
                            <td><input type="password" id="txtRetypeBossPassword" style="width:200px;" name="txtRetypeBossPassword" class="k-textbox" required  validationMessage="Vui lòng nhập lại mật khẩu">
                                <span id="spnCheckRetypePassStatus"></span>
                    <span class="k-invalid-msg" data-for="txtRetypeBossPassword">
                            </td>
                        </tr>
                        <input type="hidden" id="txtUserId">
                    </table>
                </fieldset>
            </div>
            <div class="tab-pane" id="pills-tab2">
                <h3>Chọn một mẫu dưới đây.</h3>
                <span style="display: none">Vui lòng chọn một mẫu dưới đây.</span>
                <div id="templates_ctn">

                </div>
            </div>
            <div class="tab-pane" id="pills-tab3">
                <h3>Tạo nhà hàng thành công.</h3>
            </div>
            <ul class="pager wizard">
                <li class="previous first" style="display:none;"><a href="#">First</a></li>
                <li class="previous"><a href="#">Previous</a></li>
                <li class="next last" style="display:none;"><a href="#">Last</a></li>
                <li class="next"><a href="#">Next</a></li>
            </ul>
        </div>
    </div>
</div>


<script type="text/javascript" src="/public/js/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/public/js/bootstrap/jquery.bootstrap.wizard.min.js"></script>
<script>
    var loadingImage = '<img src="/public/images/icons/push.png">';
    var validator;
    $(document).ready(function() {

        validator = $("#pills-tab1").kendoValidator().data("kendoValidator");

        $('#pills').bootstrapWizard({'tabClass': 'nav nav-pills', 'debug': false,
            onShow: function(tab, navigation, index) {

//            console.log('onShow');
            }, onNext: function(tab, navigation, index) {
                if(!doValidate(tab, index))
                    return false;
//            console.log('onNext');
            }, onPrevious: function(tab, navigation, index) {
                doValidate(tab, index);
//            console.log('onPrevious');
            }, onLast: function(tab, navigation, index) {
//            console.log('onLast');
            }, onTabClick: function(tab, navigation, index) {
//            console.log('onTabClick');
//            alert('on tab click disabled');
                return false;
            }, onTabShow: function(tab, navigation, index) {
//            console.log('onTabShow');
                var $total = navigation.find('li').length;
                var $current = index+1;
                var $percent = ($current/$total) * 100;
                $('#pills').find('.bar').css({width:$percent+'%'});
            }});

        loadDistrict();
        $("#cboProvince").change(function(){
            loadDistrict();
        });


        templateDataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url: "<?php echo '/admin/restaurant/template-group-list'  ?>",
                    dataType: "json"
                }

            }
        });

        $("#templates_ctn").kendoListView({
            dataSource: templateDataSource,
            template: kendo.template($("#template").html())
        });
    });


    function doValidate(tab,  index){
        if(index == 1){
            if (!validator.validate())
                return false;
        }
        else if(index == 2){
            if(!jQuery( 'input[name=rdoTemplateSelect]:checked' ).val()){
                $('#pills-tab2 span').show()
                return false;
            }else{
                $('#pills-tab2 span').hide()

                name = $("#txtName").val();
                provinceId = $("#cboProvince").val();
                districtId = $("#cboDistrict").val();
                address = $("#txtAddress").val();
                longitude = $("#txtLong").val();
                latitude = $("#txtLat").val();
                restaurant_phone = $("#txtDomainPhone").val();
                restaurant_email = $("#txtEmail").val();
                website = $("#txtWebsite").val();

                boss_name = $("#txtBossName").val();
                boss_phone = $("#txtBossPhone").val();
                boss_email = $("#txtBossEmail").val();
                password = $("#txtBossPassword").val();
                retype_password = $("#txtRetypeBossPassword").val();
                template_group_id = jQuery( 'input[name=rdoTemplateSelect]:checked' ).val()

                $.post('/admin/restaurant/add-restaurant',{
                    name:name, provinceId:provinceId, districtId:districtId,
                    address:address, longitude:longitude,latitude:latitude,
                    restaurant_phone:restaurant_phone,restaurant_email:restaurant_email,website:website,
                    boss_name:boss_name,boss_phone:boss_phone,boss_email:boss_email,
                    password:password, retype_password:retype_password,template_group_id:template_group_id
                },function(result){
                    if (result.success){
                        $('ul.pager li').each(function(){
                            $(this).remove();
                        });
                    }
                    else{
                        $('#error_ctn').removeClass('blue_text').html(result.msg);
                    }
                },'json');
            }
        }


        return true;
    }

    function loadDistrict(){
        city = $("#cboProvince").val();
        $.post('/admin/common/load-district',{city:city},function(result){
            if (result.success){
                $('#cboDistrict').empty();
                data = result.data;
                for (var obj in data) {
                    $('#cboDistrict').append('<option value="'+data[obj].id+'">'+data[obj].name+'</option>');
                }
            }
        },'json');
    }


</script>

<script type="text/x-kendo-template" id="template">
    <div class="restaurant_template">
        <img src="#= image_path #"  />
        <h3>#:name#</h3>
        <input type="radio" value="#:id#" name="rdoTemplateSelect">
        <p>
            <a href="javascript:doPreview(#= id#)"><i class="fa fa-eye"></i> Preview</a>&nbsp;&nbsp;&nbsp;
        </p>

    </div>
    </div>
</script>

<style type="text/css">

    #templates_ctn {
        padding: 10px;
        margin-bottom: -1px;
        min-width: 480px;
        min-height: 510px;
    }
    .restaurant_template {
        float: left;
        position: relative;
        width: 160px;
        height: 200px;
        margin: 0;
        padding: 0;
    }
    .restaurant_template img {
        width: 150px;
        height: 150px;
    }
    .restaurant_template h3 {
        margin: 0;
        padding: 3px 5px 0 0;
        max-width: 150px;
        overflow: hidden;
        line-height: 1.1em;
        font-size: .9em;
        font-weight: normal;
        color: #4c4c4c;
    }

    .restaurant_template p {
        visibility: hidden;
    }
    .restaurant_template:hover p {
        visibility: visible;
        position: absolute;
        width: 150px;
        height: 150px;
        top: 0;
        margin: 0;
        padding: 0;
        line-height: 150px;
        vertical-align: middle;
        text-align: center;
        color: #fff;
        background-color: rgba(0,0,0,0.75);
        transition: background .2s linear, color .2s linear;
        -moz-transition: background .2s linear, color .2s linear;
        -webkit-transition: background .2s linear, color .2s linear;
        -o-transition: background .2s linear, color .2s linear;
    }
    .restaurant_template p a{
        color: #fff;
    }

    #pills-tab2 span{
        padding: 7px;
        color: #ff0000;
    }
</style>